<template>
	<view>
		<view class="recommend-btn">
			<!-- 用户卡片1 -->
			<view class="user-card" v-if="info">
				<view>
					<image class="avatar" :src="info.avatar" mode=""></image>
				</view>
				<view class="user-info">
					<view class="user-name">{{info.nickName}}</view>
					<view class="user-id">ID: {{info.sysUserid}}</view>
					<view class="user-tags">
						{{info.createTime}}加入
					</view>
				</view>
			</view>
			<Empty v-else />
		</view>

	</view>
</template>

<script>
	import mineApi from "@/api/mine";
	export default {
		name: "Store",
		data() {
			return {
				range: [{
						value: 1,
						text: "VIP",
					},
					{
						value: 2,
						text: "SVIP",
					},
					{
						value: 3,
						text: "共享店主",
					},
					{
						value: 4,
						text: "联创",
					},
					{
						value: 5,
						text: "区域运营中心",
					},
					{
						value: 6,
						text: "总裁",
					},
				],
				info: null
			};
		},

		async onLoad() {

			this.getUserSuperior();
		},
		async onShow() {
			this.userInfo = uni.getStorageSync("userInfo");
		},
		methods: {
			getUserSuperior() {
				mineApi.getUserSuperior().then((res) => {
					if (res.code == 200) {
						if (res.data) {
							this.info = res.data
						}
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.recommend-btn {
		margin: 50rpx 30rpx;
		display: flex;
		flex-direction: column;
		gap: 20px;

		.user-card {
			display: flex;
			align-items: center;
			padding: 10px 20px;
			background: white;
			border-radius: 12px;
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
			border-bottom: 1px solid #f0f0f0;
			transition: all 0.3s ease;

			position: relative;

			.inventory-link {
				right: 20rpx;
				top: 30rpx;
				position: absolute;
				color: #1890ff;
				font-size: 14px;
				font-weight: 500;
				text-decoration: none;
				display: flex;
				white-space: nowrap;
			}

			.inventory-link i {
				margin-left: 4px;
				font-size: 12px;
				transition: transform 0.2s ease;
			}

			.inventory-link:hover {
				color: #40a9ff;
			}

			.inventory-link:hover i {
				transform: translateX(2px);
			}
		}

		.user-card:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
		}

		.avatar {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 16px;
			flex-shrink: 0;
		}

		.user-info {
			flex-grow: 1;
		}

		.user-name {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 4px;
		}

		.user-tags {
			display: flex;
			align-items: center;
			margin-left: 20rpx;
			color: red;
		}

		.vip-tag {
			background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
			color: #745a00;
			font-size: 12px;
			font-weight: 600;
			padding: 2px 8px;
			border-radius: 4px;
			margin-right: 8px;
		}

		.creator-tag {
			background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
			color: white;
			font-size: 12px;
			font-weight: 600;
			padding: 2px 8px;
			border-radius: 4px;
		}

		.user-id {
			font-size: 14px;
			color: #888;
		}


	}
</style>